<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<meta name="author" content="xiaojiangK" />
		<meta name="email" content="740092856@qq.com" />
		<meta name="gitee" content="https://gitee.com/xiaojiangk/" />
		<meta name="viewport" content="width=1200, initial-scale=1.0" />
		<link rel="stylesheet" type="text/css" href="images/css/admin.min.css" />
		<link rel="shortcut icon" href="images/logo.png" type="image/x-icon" />
		<title>admin-pagination</title>
	</head>
	<body>
		<div class="demo-main">
			<div class="admim-title">
				<h2>Pagination 分页</h2>
				<p>当数据量过多时，使用分页分解数据。</p>
			</div>
			<div class="item">
				<div class="title">
					<h3>基础样式</h3>
				</div>
				<div class="content pagination-box">
					<qx-pagination></qx-pagination>
				</div>
			</div>
			<div class="item">
				<div class="title">
					<h3>带有背景色的分页</h3>
				</div>
				<div class="content pagination-bg">
					<qx-pagination background="gray"></qx-pagination>
				</div>
			</div>
			<div class="item">
				<div class="title">
					<h3>小型分页</h3>
				</div>
				<div class="content pagination-small">
					<qx-pagination small></qx-pagination>
				</div>
			</div>
		</div>

		<div class="attributes">
			<h2>pagination Attributes</h2>
			<table>
				<thead>
					<tr>
						<th>参数</th>
						<th>说明</th>
						<th>类型</th>
						<th>可选值</th>
						<th>默认值</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>small</td>
						<td>是否使用小型分页样式</td>
						<td>boolean</td>
						<td>—</td>
						<td>false</td>
					</tr>
					<tr>
						<td>background</td>
						<td>背景色</td>
						<td>string</td>
						<td>gray</td>
						<td>—</td>
					</tr>
					<tr>
						<td>pageNum</td>
						<td>数据总数量</td>
						<td>number</td>
						<td>—</td>
						<td>—</td>
					</tr>
					<tr>
						<td>current</td>
						<td>当前分页</td>
						<td>number</td>
						<td>—</td>
						<td>—</td>
					</tr>
				</tbody>
			</table>
			<h2>pagination Events</h2>
			<table>
				<thead>
					<tr>
						<th>事件名称</th>
						<th>说明</th>
						<th>回调参数</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>backfun</td>
						<td>点击分页后回调函数</td>
						<td>event</td>
					</tr>
				</tbody>
			</table>
		</div>

		<script src="images/js/jquery.min.js"></script>
		<script src="images/js/admin.min.js"></script>
		<script type="text/javascript">
			//翻页
			$('.pagination-box').createPage({
				pageNum: 10,
				current: 1,
				backfun: function (e) {
					console.log(e)
				}
			})
			$('.pagination-bg').createPage({
				pageNum: 20,
				current: 2,
				backfun: function (e) {
					console.log(e)
				}
			})
			$('.pagination-small').createPage({
				pageNum: 30,
				current: 3,
				backfun: function (e) {
					console.log(e)
				}
			})
		</script>
	</body>
</html>
